<template>
  <div class="pet-news-page">
    <!-- 背景图片 -->
    <div class="page_bg" :style="`background: url(${require('@/assets/images/indb.jpg')}) center top no-repeat;`"></div>
    
    <!-- 主要内容 -->
    <div class="container">
      <div class="row">
        <!-- 右侧主内容区域 -->
        <div class="col-xs-12 col-sm-8 col-md-9" style="float:right">
          <div class="list_box">
            <h2 class="left_h2">宠物新闻</h2>
            <div v-if="loading" class="loading-state">
              <p>正在加载文章...</p>
            </div>
            <div v-else-if="error" class="error-state">
              <p>加载失败：{{ error }}</p>
            </div>
            <ul v-else class="list_news">
              <li v-for="article in articles" :key="article.id">
                <router-link 
                  :to="`/pet-column/article/${article.id}`" 
                  :title="article.title"
                >
                  {{ article.title }}
                </router-link>
                <span class="news_time">{{ formatDate(article.date) }}</span>
              </li>
            </ul>
            
            <!-- 分页 -->
            <div class="pagebar" v-if="totalPages > 1">
              <div class="pagination">
                <a 
                  class="page-item page-link st" 
                  @click="goToPage(currentPage - 1)"
                  :class="{ disabled: currentPage === 1 }"
                  href="javascript:;" 
                  title="上一页"
                >
                  &lt;&lt;
                </a>
                <a 
                  v-for="page in visiblePages" 
                  :key="page"
                  @click="goToPage(page)"
                  :class="['page-num', { 'page-num-current': page === currentPage }]"
                  href="javascript:;"
                >
                  {{ page }}
                </a>
                <a class="page-item page-link" href="javascript:;" :title="`当前页/总页数`">
                  {{ currentPage }}/{{ totalPages }}
                </a>
                <a 
                  class="page-item page-link st" 
                  @click="goToPage(currentPage + 1)"
                  :class="{ disabled: currentPage === totalPages }"
                  href="javascript:;" 
                  title="下一页"
                >
                  &gt;&gt;
                </a>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 左侧边栏 -->
        <div class="col-xs-12 col-sm-4 col-md-3">
          <!-- 导航菜单 -->
          <div class="left_nav" id="categories">
            <h2 class="left_h2">宠物栏目</h2>
            <ul class="left_nav_ul" id="firstpane">
              <li>
                <router-link class="biglink" to="/pet-column/knowledge">
                  养宠知识
                </router-link>
              </li>
              <li>
                <router-link class="biglink curr" to="/pet-column/news">
                  宠物新闻
                </router-link>
              </li>
            </ul>
          </div>
          
          <!-- 搜索框 -->
          <form @submit.prevent="performSearch">
            <div class="input-group search_group">
              <input 
                type="text" 
                v-model="searchKeyword"
                class="form-control input-sm" 
                placeholder="信息查询"
              >
              <span class="input-group-btn">
                <button @click="performSearch" class="btn btn-sm mysearch_btn" type="button">
                  搜 索
                </button>
              </span>
            </div>
          </form>
          
          <!-- 养宠知识 -->
          <div class="left_news">
            <h2 class="left_h2">养宠知识</h2>
            <ul>
              <li v-for="knowledge in knowledgeArticles.slice(0, 5)" :key="knowledge.id">
                <router-link :to="`/pet-column/article/${knowledge.id}`" :title="knowledge.title">
                  {{ knowledge.title }}
                </router-link>
                <span class="news_time">{{ formatDate(knowledge.date, true) }}</span>
              </li>
            </ul>
          </div>
          
          <!-- 联系我们 -->
          <div class="left_contact">
            <h2 class="left_h2" style="margin-bottom:20px;">联系我们</h2>
            <p v-if="contactInfo.name">联系人：{{ contactInfo.name }}</p>
            <p v-if="contactInfo.phone">手机：{{ contactInfo.phone }}</p>
            <p v-if="contactInfo.tel">电话：{{ contactInfo.tel }}</p>
            <p v-if="contactInfo.email">邮箱：{{ contactInfo.email }}</p>
            <p v-if="contactInfo.address">地址：{{ contactInfo.address }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ApiService from '@/services/api'

export default {
  name: 'PetNews',
  data() {
    return {
      searchKeyword: '',
      currentPage: 1,
      pageSize: 10,
      articles: [],
      contactInfo: {},
      loading: false,
      error: null,
      total: 0,
      totalPages: 0,
      newsArticles: [
        {
          id: 1,
          title: '抵制大规模捕杀流浪狗',
          date: '2025-09-13',
          category: 'news',
          author: 'AB模板网',
          views: 59572,
          content: `一场针对无辜流浪狗的猎杀正在进行！在全国各地，很多人加入了这场针对流浪狗的屠杀！这其中有很多人只是为了宣泄自己的情绪。这是由一根缺失的牵引绳引发的悲剧，是由一个不文明养犬人引发的惨案。因为一个人，一只狗，就会有无数只无辜的生命为之买单！

文明社会，不应该发生这样的悲剧！请停止这场没有理由的屠杀！现在罗威纳犬伤女童事件正在走向一个偏激的、极端的方向，各地针对流浪狗展开了残忍的杀害。我们不明白，难道遇到问题我们就只会用这种简单粗暴的方法来解决吗？

难道这些残忍对流浪狗下死手的人还不明白，狗本身没办法为自己负责，那些遗弃虐待的，那些不规范养犬的才是罪魁祸首！如果真的想源头阻断悲剧的发生，这场被声讨的对象，不应该是无辜的狗，而是他们的主人！

事实上多数的犬只伤人事件都是可避免的！只是需要我们的管理部门、养犬人，甚至受害者共同努力！如今这场猎杀不仅是残忍的，而且是无用的。除了让负面舆论情绪得到释放，没有任何好处！

必须停止这场残忍的屠杀！这场屠杀不会解决问题，只会释放仇恨的戾气！只有通过爱和理解，而不是暴力，才能解决问题！转发出去！一起为无辜的狗子发声！不要用悲剧来弥补悲剧！这一切的错，从来都不是无辜的流浪狗！`
        },
        {
          id: 2,
          title: '虐待动物行为入法有望',
          date: '2025-09-13',
          category: 'news',
          author: 'AB模板网',
          views: 42356,
          content: `近日，关于虐待动物行为入法的讨论再次引起社会关注。专家表示，将虐待动物行为纳入法律范围，对于保护动物权益具有重要意义。

根据相关专家的分析，虐待动物行为入法将从以下几个方面发挥作用：首先，明确虐待动物的法律定义和处罚标准，为执法部门提供明确的法律依据；其次，通过法律手段提高虐待动物的成本，形成有效的威慑作用。

目前，我国在动物保护方面的法律相对滞后，主要依靠《治安管理处罚法》等法规进行管理，但处罚力度相对较轻。而在一些发达国家，虐待动物已被明确列为刑事犯罪。

业内人士认为，虐待动物行为入法不仅有助于保护动物权益，还能够促进社会文明进步。研究表明，虐待动物与其他暴力犯罪之间存在一定的关联性，及早干预虐待动物行为有助于预防更严重的犯罪。

不过，在立法过程中也需要考虑多个方面的平衡，包括传统文化、经济发展水平、执法能力等因素。专家建议，可以先从严重的虐待动物行为开始立法，逐步完善相关法律体系。

社会各界对此也表达了不同的看法，动物保护组织强烈支持相关立法，认为这是动物权益保护的重要进步。而一些传统行业的从业者则担心过严的法律可能影响正常的生产经营活动。

无论如何，动物保护法律的完善已经成为社会发展的必然趋势。相信在各方的共同努力下，我国的动物保护法律体系将会不断完善，为建设文明和谐的社会贡献力量。`
        },
        {
          id: 3,
          title: '中国狂犬病防治项目再起航',
          date: '2025-09-13',
          category: 'news',
          author: 'AB模板网',
          views: 38921,
          content: `中国狂犬病防治项目正式启动新一轮防治工作，旨在通过科学的方法降低狂犬病的发生率，保障人民群众的生命安全。

根据世界卫生组织的数据，狂犬病是一种可预防但几乎100%致死的疾病。在我国，狂犬病的发病率虽然近年来有所下降，但仍然是需要重点关注的公共卫生问题。

此次防治项目采用"源头控制+预防接种+健康教育"的综合防控策略。在源头控制方面，将加强对流浪犬的管理，推广犬只免疫接种，建立完善的动物疫情监测体系。

预防接种方面，将继续完善人用狂犬病疫苗的供应保障体系，确保疫苗质量和接种安全。同时，加强对高风险人群的主动免疫接种，如兽医、动物管理人员等。

健康教育是防治工作的重要组成部分。项目将通过多种渠道普及狂犬病防治知识，提高公众的防护意识。重点宣传被动物咬伤后的正确处理方法，包括及时清洗伤口、接种疫苗等。

项目还将加强国际合作，学习借鉴其他国家的成功经验。特别是在边境地区，将与周边国家建立联防联控机制，共同防控跨境传播风险。

专家表示，狂犬病防治是一项长期的系统工程，需要政府、社会和个人的共同参与。只有建立完善的防控体系，才能有效降低狂犬病的威胁。

此次项目的启动，标志着我国狂犬病防治工作进入了一个新的阶段。相信通过各方的共同努力，我国的狂犬病防治水平将会显著提升，为保障人民群众的生命健康作出重要贡献。`
        },
        {
          id: 4,
          title: '中国小动物保护协会新团队成立',
          date: '2025-09-13',
          category: 'news',
          author: 'AB模板网',
          views: 35467,
          content: `中国小动物保护协会宣布成立新的专业团队，将致力于流浪动物救助、宠物保护等相关工作，为小动物的福利保障提供更专业的服务。

新成立的团队包括兽医专家、动物行为学家、法律顾问、志愿者管理专家等多个专业领域的人员。他们将在动物救助、医疗救治、行为矫正、法律咨询等方面提供专业支持。

协会负责人表示，成立专业团队是为了更好地应对当前动物保护工作中面临的各种挑战。随着社会对动物保护意识的提高，相关工作的专业化要求也越来越高。

团队的主要工作内容包括：建立标准化的动物救助流程，提高救助效率和成功率；开展动物医疗救治工作，为伤病动物提供及时的医疗服务；进行动物行为评估和矫正，帮助动物更好地适应新环境。

此外，团队还将负责志愿者的培训和管理工作。通过系统的培训，提高志愿者的专业技能和服务水平，确保动物保护工作的质量和安全。

法律咨询服务也是团队的重要工作之一。随着动物保护相关法律的不断完善，团队将为公众提供法律咨询，协助处理动物保护相关的法律问题。

协会还计划与高等院校、科研机构建立合作关系，开展动物保护相关的研究工作，为政策制定和实践工作提供科学依据。

团队成立后，将首先在北京、上海、广州等重点城市开展工作，逐步扩展到全国其他地区。预计在未来三年内，团队将覆盖全国主要城市。

社会各界对新团队的成立表示欢迎和支持。动物保护志愿者认为，专业团队的成立将大大提升动物保护工作的效率和质量。

这一举措标志着我国动物保护事业正在向更加专业化、规范化的方向发展，为建设人与动物和谐共存的社会环境奠定了重要基础。`
        },
        {
          id: 5,
          title: '国家农业部官宣：猫犬属于非食用动物',
          date: '2025-09-13',
          category: 'news',
          author: 'AB模板网',
          views: 56789,
          content: `国家农业部正式发布公告，明确规定猫、犬等伴侣动物属于非食用动物，此举对于保护动物权益具有里程碑意义。

这一公告的发布，结束了长期以来关于猫犬是否属于食用动物的争议。公告明确指出，随着人类文明进步和公众对动物保护意识的增强，猫犬已从传统的牲畜转变为伴侣动物，不应被列为食用动物。

公告的法律依据包括《畜牧法》、《动物防疫法》等相关法律法规。根据这些法律的规定，国家对不同类别的动物实行分类管理，明确区分食用动物和非食用动物。

这一决定得到了国际社会的广泛关注和认可。世界动物保护协会表示，这是中国在动物保护方面迈出的重要一步，体现了一个负责任大国的担当。

对于相关行业的影响，专家表示这一规定将促进相关产业的转型升级。一些原本从事相关行业的人员可以转向宠物服务、动物医疗等新兴行业。

公告还强调了加强执法监督的重要性。相关部门将加大执法力度，严厉打击违法违规行为，确保公告的有效执行。

动物保护组织对此表示热烈欢迎，认为这是动物权益保护的重大胜利。他们表示将继续推动更多动物保护相关法律的完善。

公众对这一决定也表示支持。调查显示，超过80%的受访者支持将猫犬列为非食用动物，认为这符合现代文明社会的价值观念。

专家指出，这一公告的发布不仅具有法律意义，更具有重要的社会文化意义。它反映了我国社会文明程度的提升和动物保护意识的增强。

未来，相关部门还将制定更详细的实施细则，确保公告的有效落实。同时，也将加强宣传教育，提高公众对动物保护的认识和理解。

这一历史性的决定，必将在我国动物保护事业发展史上留下浓墨重彩的一笔，为建设人与动物和谐共存的美好社会奠定坚实基础。`
        },
        {
          id: 6,
          title: '流浪动物之家成立了',
          date: '2025-09-13',
          category: 'news',
          author: 'AB模板网',
          views: 29834,
          content: `流浪动物之家正式成立，这是一个专门为流浪动物提供救助、医疗、领养服务的综合性平台。

流浪动物之家的成立，源于社会各界对流浪动物问题的关注和关爱。随着城市化进程的加快，流浪动物数量不断增加，它们的生存状况令人担忧。

该机构配备了专业的兽医团队、动物护理人员和志愿者队伍。设施包括动物医院、康复中心、领养中心等，能够为流浪动物提供全方位的服务。

救助工作是流浪动物之家的核心业务。工作人员会定期巡查城市各个角落，主动寻找需要帮助的流浪动物。对于伤病动物，会立即提供医疗救治。

医疗服务方面，机构配备了先进的医疗设备和专业的兽医团队。除了基本的治疗服务外，还提供绝育手术、疫苗接种、健康检查等预防性医疗服务。

领养服务是帮助流浪动物找到新家庭的重要环节。机构建立了完善的领养程序，包括动物健康评估、潜在领养人资格审查、领养后跟踪服务等。

教育宣传也是机构的重要工作内容。通过举办各种活动，向公众普及动物保护知识，提高人们对流浪动物问题的认识和关注。

机构还与政府部门、其他动物保护组织建立了合作关系，形成了救助流浪动物的合力。通过资源整合和经验分享，提高整体工作效率。

志愿者是机构重要的力量支撑。目前已有数百名志愿者参与到各项工作中，他们来自社会各个阶层，用自己的爱心为流浪动物奉献着力量。

资金来源主要包括社会捐赠、企业赞助、政府补贴等。机构承诺将严格管理资金使用，确保每一分钱都用在流浪动物身上。

成立仪式上，相关领导表示，流浪动物之家的成立是城市文明建设的重要组成部分，希望能够为解决流浪动物问题提供有效的解决方案。

流浪动物之家的成立，为城市中的流浪动物点亮了希望之光，也为建设人与动物和谐共存的美好城市迈出了重要一步。`
        }
      ],
      knowledgeArticles: [
        {
          id: 7,
          title: '猫为什么会炸毛',
          date: '2025-09-13',
          category: 'knowledge',
          author: '宠物专家',
          views: 45623
        },
        {
          id: 8,
          title: '如何正确训练小狗大小便',
          date: '2025-09-13',
          category: 'knowledge',
          author: '训犬师',
          views: 67890
        },
        {
          id: 9,
          title: '宠物疫苗接种完整指南',
          date: '2025-09-13',
          category: 'knowledge',
          author: '兽医师',
          views: 53421
        },
        {
          id: 10,
          title: '如何选择适合的宠物食品',
          date: '2025-09-13',
          category: 'knowledge',
          author: '宠物营养师',
          views: 41267
        },
        {
          id: 11,
          title: '宠物洗澡的正确方法',
          date: '2025-09-13',
          category: 'knowledge',
          author: '宠物美容师',
          views: 38964
        }
      ]
    }
  },
  computed: {
    // 可见的页码
    visiblePages() {
      const pages = []
      const maxVisiblePages = 5
      let start = Math.max(1, this.currentPage - Math.floor(maxVisiblePages / 2))
      let end = Math.min(this.totalPages, start + maxVisiblePages - 1)
      
      if (end - start < maxVisiblePages - 1) {
        start = Math.max(1, end - maxVisiblePages + 1)
      }
      
      for (let i = start; i <= end; i++) {
        pages.push(i)
      }
      return pages
    }
  },
  async mounted() {
    await this.fetchArticles()
    await this.fetchContactInfo()
  },
  methods: {
    async fetchArticles() {
      try {
        this.loading = true
        this.error = null
        const response = await ApiService.get('/news-articles', {
          params: {
            search: this.searchKeyword,
            page: this.currentPage,
            pageSize: this.pageSize
          }
        })
        
        if (response.success) {
          this.articles = response.data
          this.total = response.total
          this.totalPages = response.totalPages
        }
      } catch (error) {
        console.error('获取新闻文章失败:', error)
        this.error = '加载文章失败'
      } finally {
        this.loading = false
      }
    },
    async fetchContactInfo() {
      try {
        const response = await ApiService.get('/contact-info')
        if (response.success) {
          this.contactInfo = response.data
        }
      } catch (error) {
        console.error('获取联系信息失败:', error)
      }
    },
    // 跳转到指定页面
    async goToPage(page) {
      if (page >= 1 && page <= this.totalPages) {
        this.currentPage = page
        await this.fetchArticles()
        window.scrollTo({ top: 0, behavior: 'smooth' })
      }
    },
    // 执行搜索
    async performSearch() {
      this.currentPage = 1
      await this.fetchArticles()
    },
    // 格式化日期
    formatDate(dateString, short = false) {
      const date = new Date(dateString)
      if (short) {
        return `${String(date.getMonth() + 1).padStart(2, '0')}/${String(date.getDate()).padStart(2, '0')}`
      }
      return date.toLocaleDateString('zh-CN')
    }
  }
}
</script>

<style scoped>
.pet-news-page {
  padding-top: 0; /* 使用全局body padding-top */
}

.page_bg {
  height: 200px;
  background-size: cover !important;
  background-position: center !important;
  margin-bottom: 30px;
}

.list_box {
  background: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-bottom: 20px;
}

.left_h2 {
  color: #04A07B;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid #04A07B;
}

.list_news {
  list-style: none;
  padding: 0;
  margin: 0;
}

.list_news li {
  padding: 12px 0;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.list_news li:last-child {
  border-bottom: none;
}

.list_news a {
  color: #333;
  text-decoration: none;
  flex: 1;
  margin-right: 15px;
  line-height: 1.5;
}

.list_news a:hover {
  color: #04A07B;
}

.news_time {
  color: #999;
  font-size: 14px;
  white-space: nowrap;
}

/* 侧边栏样式 */
.left_nav, .left_news, .left_contact {
  background: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-bottom: 20px;
}

.left_nav_ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.left_nav_ul li {
  border-bottom: 1px solid #eee;
}

.left_nav_ul li:last-child {
  border-bottom: none;
}

.biglink {
  display: block;
  padding: 12px 0;
  color: #333;
  text-decoration: none;
  font-weight: 500;
}

.biglink:hover {
  color: #04A07B;
}

.biglink.curr {
  color: #04A07B;
  font-weight: bold;
}

.search_group {
  margin-bottom: 20px;
}

.mysearch_btn {
  background: #04A07B;
  color: white;
  border: none;
}

.mysearch_btn:hover {
  background: #038066;
}

.left_news ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.left_news li {
  padding: 8px 0;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.left_news li:last-child {
  border-bottom: none;
}

.left_news a {
  color: #333;
  text-decoration: none;
  flex: 1;
  margin-right: 10px;
  font-size: 14px;
}

.left_news a:hover {
  color: #04A07B;
}

.left_contact p {
  margin-bottom: 8px;
  color: #666;
}

/* 分页样式 */
.pagebar {
  text-align: center;
  margin-top: 30px;
}

.pagination {
  display: inline-flex;
  gap: 5px;
}

.page-item, .page-num {
  display: inline-block;
  padding: 8px 12px;
  margin: 0 2px;
  background: white;
  border: 1px solid #ddd;
  color: #333;
  text-decoration: none;
  border-radius: 4px;
  cursor: pointer;
}

.page-item:hover, .page-num:hover {
  background: #04A07B;
  color: white;
  border-color: #04A07B;
}

.page-num-current {
  background: #04A07B !important;
  color: white !important;
  border-color: #04A07B !important;
}

.page-item.disabled {
  background: #f8f9fa;
  color: #6c757d;
  cursor: not-allowed;
  pointer-events: none;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .col-xs-12.col-sm-8.col-md-9 {
    float: none !important;
    order: 2;
  }
  
  .col-xs-12.col-sm-4.col-md-3 {
    order: 1;
    margin-bottom: 20px;
  }
  
  .pet-news-page {
    padding-top: 0; /* 使用全局body padding-top */
  }
}
</style>